<template lang="">
	<view
		class="message-bar"
		@click="linkTo('/packages/ChatPages/PrivateChat/index',{receiveId:messageList.id,goodId:messageList.commodityId})"
	>
		<view class="left">
			<u-avatar :src="messageList.avatarUrl" />
			<view class="text-info">
				<text class="userName">{{messageList.appNickName}}</text>
				<text
					class="message"
					v-if="messageList.type === 'like'"
				>
					{{messageList.message}}
				</text>
				<text
					class="message"
					v-else
				>
					{{messageList.message}}
				</text>
				<view class="time">
					<text
						class="reply"
						v-if="type === 'comment'"
					>
						回复了你的留言
					</text>
					<text> {{messageList.time}}</text>
				</view>
			</view>
		</view>
		<view class="right">
			<u-badge
				max="99"
				:value="messageList.unRead"
			/>
		</view>
	</view>
</template>
<script>

export default {
  props: {
    type: {
      type: String,
      default: 'default'
      // type 有三种类型：like 是点赞，default 是默认的，comment 是评论
    },
    messageList: {
      // 渲染的数据对象
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {

    }
  },
  created() {

  },
  methods: {
    /**
		 * 页面跳转
		 */

  }
}
</script>
<style lang="scss" scoped>
	.message-bar {
		background-color: #ffffff;
		width: 100wh;
		height: 140rpx;
		padding: 0 32rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-top: 2rpx rgba($color: #acacac, $alpha: 0.2) solid;

		.left {
			display: flex;
			flex-direction: row;
			.text-info {
				margin-left: 28rpx;
				display: flex;
				flex-direction: column;
				.userName {
					color: #333333;
					font-size: 28rpx;
					font-weight: 550;
					text-align: left;
				}
				.message {
					color: #333333;
					font-size: 24rpx;
					text-align: left;
				}
				.time {
					color: #ACACAC;
					font-size: 20rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					.reply {
						padding-right: 10rpx;
					}
				}
			}
		}

		.right {

		}
	}
</style>
